<template>
	<div class="login">
		<el-form  label-width="100px" class="demo-ruleForm">
			<el-form-item>
				<span>账<i class='marginOne'></i>号</span>
				<el-input v-model="username" clearable placeholder='输入用户名或绑定的手机号或邮箱'></el-input>
			</el-form-item>
			<el-form-item>
				<span>密<i class='marginOne'></i>码</span>
				<el-input type="password" clearable show-password  v-model="password" autocomplete="off" @keyup.enter.native='login()'></el-input>
			</el-form-item>
		</el-form>
		<div class="bottom"> 
			<el-button  type="primary" @click="login">登 录</el-button>
			<el-button @click="$emit('closeDialog')">取 消</el-button>
			<p>
				还没有账户?  
				<el-link type="success" @click="$emit('changeCom','register')">立刻创建</el-link>
				<el-link type="danger" @click='resetPassword'>忘记密码</el-link>
			</p>
			<div>
				<h2 class='thirdTitle'>第三方账号登录：</h2>
				<ul class='thirdParty'>
					<li>
						<img src="https://b-gold-cdn.xitu.io/v3/static/img/weibo.fa758eb.svg" alt="">
					</li>
					<li>
						<img src="https://b-gold-cdn.xitu.io/v3/static/img/wechat.e0ff124.svg" alt="">
					</li>
					<li @click='githubLogin'>
						<img src="https://b-gold-cdn.xitu.io/v3/static/img/github.547dd8a.svg" alt="">
					</li>
				</ul>
			</div>
		</div>
		<vcode :show="showVcode" @success="onSuccessVcode" @close="onCloseVcode" />
	</div>
</template>
<script>
	import {api} from '@/api/public'
	import vcode from "vue-puzzle-vcode"
	export default{
		name:'login',
		data(){
			return{
				showVcode:false,
				vcodeKey:0,
				username:'',
				password:'',
				user:{
					type:'',
					code:'',
					password:'',
					checkPassword:'',
					contact:''
				}
			}
		},
		components:{
			vcode
		},
		methods:{
			resetPassword(){
				this.$emit('changeCom','resetPassword');
			},
			// 点击遮罩层，关闭模态框
		    onCloseVcode() {
		    	this.showVcode = false;
		    },
			onSuccessVcode(msg){
				this.vcodeKey = 1;
				this.login();
			},
			async login(){
				if(!this.username) this.info('用户名还没输入~~~','w');
				else if(!this.password) this.info('密码还没输入~~~','w');
				else{
					this.showVcode = true;
		    		if(this.vcodeKey!=1) return;
		    		let {success,result,msg,token}=await api('post','user','login',{username:this.username,password:this.password});
					if(success && result.is_show===1){
		    			let {avator,name,id,phone,email,role,create_time}=result;
						this.info('登录成功~~~');
						this.$emit('isLogin',[name,avator]);
						sessionStorage.setItem('name',name);
						sessionStorage.setItem('id',id);      
						sessionStorage.setItem('phone',phone);
						sessionStorage.setItem('email',email);
						sessionStorage.setItem('avator',avator);
						sessionStorage.setItem('role',role);
						sessionStorage.setItem('create_time',create_time);
						sessionStorage.setItem('token',token);
						setTimeout(()=>{
							// location.reload();
							this.$emit('closeDialog');
						},500);
					}
					else if(success) this.info('此用户被管理员封号了，请联系管理员~~~','e');
					else this.info(msg,'e');
					this.showVcode = false;
		    		this.vcodeKey=0;
				}
			},
			githubLogin(){
				// let iTop = (window.screen.height-30-720)/2;       //获得窗口的垂直位置;
  				// let iLeft = (window.screen.width-10-700)/2;        //获得窗口的水平位置;
				// window.open("https://github.com/login/oauth/authorize?client_id=1b27cae7edb651dbdc4b&redirect_uri=http://localhost:8080/#/oAuth", "", `height=720, width=700,top=${iTop},left=${iLeft}`);
				// this.$router.push('/oAuth');
				location.href='https://github.com/login/oauth/authorize?client_id=1b27cae7edb651dbdc4b&redirect_uri=http://localhost:8080/githubLogin';
			}
		},
	}
</script>
<style scoped lang='stylus'>
	.login{
		>>> .el-dialog {
		    max-width: 500px !important;
		    text-align: center;
		    min-height:425px;
		    >>> .el-dialog__body{
				padding-top: 10px;
				padding-left: 46px;
			}
		    img{
				max-width: 100%;
			    max-height: 70vh;
			    padding-bottom: 3em;
			}
		}
		>>>.el-form-item__content{
			>.el-input,.codeBox,.el-select{
				width:79%;
			}
			>span{
				font-size:16px;
				margin-right:.5em;
			}
		}
		>>>.el-popover{
			font-size: 15px;
		}
		.bottom{
			>p{
				position: relative;
				.el-link{
					&.el-link--danger{
						position: absolute;
						right: 2em;
					}
				}
			}
			.thirdTitle{
				font-size: 18px;
				color: #767676;
				margin:.6em 0;
				margin-bottom: 1em;
			}
			.thirdParty{
				width: 65%;
				margin:0 auto;
				list-style-type: none;
				display:flex;
				justify-content: space-around;
				align-items: center; 
				li{
					width: 50px;
			    	height: 50px;
			    	border-radius: 50%;
			    	background-color: #f4f8fb;
			    	display: flex;
			    	align-items: center;
			    	justify-content: center;
			    	cursor:pointer;
			    	>img{
						width: 35px;
						height: 35px;
					}
				}
			}
		}
	}
</style>